<template>
	<view>
		<view class="wrap">
			<view class="nav">
				<view class="tab01"  @tap="swichNav(0)"  :class="currentTab==0 ? 'selected01' : '' ">快递</view>
				<view class="tab01"  @tap="swichNav(1)"  :class="currentTab==1 ? 'selected01' : '' ">自提</view>
			</view>
			<view class="address_box" data-url="/pages/address/address?f=1" @click="gotopage" v-if="currentTab=='0'">
				<view class="icon iconfont">&#xe622;</view>
				<view class="personal">
					<view class="name_box">
						<view class="name" v-if="name != ''">{{name}}</view>	
						<view class="name" v-if="name == ''">请选择地址</view>
						<view class="phone" v-if="name != ''">{{phone}}</view>
					</view>
					<view class="address" v-if="name != ''">{{address}}</view>
					<view class="address" v-if="name == ''">暂无选择收货地址</view>
				</view>
				<view class="arrow iconfont">&#xe775;</view>
			</view>
			<view class="address_box" @click="goMap" v-if="currentTab=='1'" :data-lat="dd.lat" :data-lng="dd.lng" :data-address="dd.ziti">
				<view class="icon iconfont">&#xe622;</view>
				<view class="personal">
					<view class="name_box">
						<view class="name">网点电话：</view>	
						<view class="phone" v-if="dd.ziti_phone != ''">{{dd.ziti_phone}}</view>
					</view>
					<view class="address" v-if="dd.ziti != ''">{{dd.ziti}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="order_box">
				<view class="number">商品详情：</view>
				<!-- <view class="state">订单已完成</view> -->
			</view>
			<view class="goods_box" v-for="(item, index) in list" :key="index">
				<image class="goods_img" :src="item.image" mode="scaleToFill"></image>
				<view class="title">{{item.name}}</view>
				<view class="num">x{{item.quantity}}</view>
		
			
			<view class="money" v-if='e.pay==1'>￥{{ item.price }}</view>
			<!-- 	<view class="money" v-if='e.pay==2'>￥{{ item.price }}+{{ item.znj}}%助农劵</view> -->
					<view class="money" v-if='e.pay==2'>积分：{{ item.price}}</view>
				<view class="time">规格：{{ item.sku_dkr || '默认' }}</view>
			</view>
		</view>
	<!-- 	<view class="remarks" v-if=' type==7 || type==8'>
			<view class="bei" v-if='type==5'>代理地区(例:闽侯县)</view>
			<view class="bei" v-if='type==6'>代理地区(例:仓山区)</view>
			<view class="bei" v-if='type==7'>代理地区(例:福州市)</view>
			<view class="bei" v-if='type==8'>代理地区(例:福建省)</view>
			<view class="zhu"><textarea value="" placeholder="请规范输入地区" v-model="city"/></view>
		</view>
		<view class="remarks" v-if='type==5||type==6'>
			<view class="bei">代理地区</view>			
			<view class="zhu zhu02" @tap="openAddres">
				<input disabled="true" type="text" placeholder="请选择" value="" v-model="city" />
				<view class="arrow iconfont">&#xe8c7;</view>
			</view>
		</view> -->
		<view class="remarks">
			<view class="bei">备注</view>
			<view class="zhu"><textarea value="" placeholder="请输入备注信息" v-model="bz"/></view>
		</view>
<!-- 
		<view class="give_box">
			<view class="x_title">订单信息</view>
			<view class="text_list">
				<view class="text">收货地址</view>
				<view class="text02">福建省福州市晋安区福光路162号</view>
			</view>
			<view class="text_list">
				<view class="text">姓名</view>
				<view class="text02">这里是名字</view>
			</view>
			<view class="text_list">
				<view class="text">电话</view>
				<view class="text02">158802633665</view>
			</view>
			<view class="text_list">
				<view class="text">配送方式</view>
				<view class="text02">中通快递</view>
			</view>
			<view class="text_list">
				<view class="text">运费</view>
				<view class="text02 moneycolor">¥10.00</view>
			</view>
			
			<view class="text_list" @tap="autoTick">
				<view class="text" style="line-height: 30px;">用460积分抵现</view>
				<view class="tips">当前积分 3600</view>
				<view class="money">¥-2.00</view>
				<view class="tick iconfont" :class="tick ? 'tickcolor' : ''">&#xe6aa;</view>
				
			</view>
			<view class="text_list" style="border-bottom:1px solid #f5f5f5">
				<view class="text">备注</view>
				<view class="text02">无</view>
				<input class="text02" type="text" value="" placeholder="选填，请先和商家协商一致" />
			</view>
			<view class="contact" @tap="openPhone">
				<view class="icon iconfont icondadianhua"></view>
				<view class="text">联系商家</view>
			</view>
		</view> -->
		
		<view class="coupon" v-if='e.pay==1'>
			<view class="c_tit">选择优惠券</view>
			<scroll-view class="c_con">
				<block v-for="(item,index) in con" :key="'c_'+index">
					<view class="c_list" @click="selectCoupon" :data-id="item.id" :data-coupon="item.b">
						<image class="l_img" src="../../static/coupon_bg.png"></image>
						<view class="l_con">
							<view class="l_c_t1">￥{{item.b}}</view>
							<view class="l_c_t2">满{{item.a}}使用</view>
							<view class="l_c_time">{{item.ex}} 到期</view>
						</view>
						<view class="select" v-if="conid == item.id">
							<view class="iconfont s_icon">&#xe61f;</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		
		

		<view class="footer">
		<!-- <view class="money_box" v-if='dd.us_lv>1'>
			<view class="total_box">
				<view class="text">合计：</view>
				<view class="money" >￥{{ dd.price_zk }}</view>
			
			</view>
		</view> -->
			<view class="money_box" >
				<view class="total_box">
					<view class="text">实付：</view>
					<view class="money" v-if='e.pay==1'>￥{{ lastPrice }} <block v-if='currentTab==0 && e.yun>0'>+运费:{{e.yun}}</block></view>
				<!-- 		<view class="money" v-if='e.pay==2'>￥{{ lastPrice }}+{{ e.pay_znj }}助农劵</view> -->
							<view class="money" v-if='e.pay==2'>积分：{{ lastPrice}}</view>
			
				</view>
			</view>
			<view class="menu" data-url="/pages/car/payment" @tap="go()">提交订单</view>
		</view>
		
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#333"></simple-address>
	</view>
</template>
<script>
export default {
	data() {
		return {
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '',
			totalmoney:'0',
			checked:false,
			tick:false,
			name:'',
			phone:'',
			address:"",
			address_id:'',
			pupu_show:false,
			list:"",
			con:'',
			conid:'',
			coupon:0,
			dd:'',
			ck:9,
			city:'',
			bz:'',
			 type:0,
			 e:[],
			  pay_type:0,
			currentTab:0,
			fid:1,
			n_province:'',
			p_array:[],
			p_index:'',
			p_id:'',   //最后的省id
			
			n_city:'',
			c_array:[],
			c_index:'',
			c_id:'',    //最后的市id
			
			n_district:'',
			d_array:[],
			d_index:'',
			d_id:'',   //最后的区id
		};
	},
	onLoad(e){
		this.type=e.type;
		this.ck=e.ck;
		this.arrayValueFun('p');
	},
	onShow(){
		let me = this;
		
		if(uni.getStorageSync('a'))
		{
			me.name=uni.getStorageSync('a')
			me.phone=uni.getStorageSync('b')
			me.address=uni.getStorageSync('c')
			me.address_id=uni.getStorageSync('d')
		}			
		
		me.Net._get('addOrder1',{ck:me.ck},(res)=>{
			if(res.code ==1){
				me.list=res.data.list
				me.totalmoney=res.data.dis
				me.dd=res.data
				me.e=res.data
				if(res.data.add && !uni.getStorageSync('a'))
				{
					me.name=res.data.add.consigner
					me.phone=res.data.add.phone
					me.address=res.data.add.city+res.data.add.detail
					me.address_id=res.data.add.address_id
				}
				if(res.data.con)
				{
					me.con=res.data.con
				}
				//console.log(res.data)
			}
		});
	},
	methods: {
		goMap(e){
			// #ifdef APP-PLUS
			uni.openLocation({
				latitude: Number(e.currentTarget.dataset.lat),
				longitude: Number(e.currentTarget.dataset.lng),
				name:'自提网点',
				address:e.currentTarget.dataset.address,
				success: function () {
					console.log('success')
				}
			});
			// #endif
			// #ifdef H5
			uni.navigateTo({
				url:'/pages/map/map',
				success(res) {
					res.eventChannel.emit('acceptDataFromOpenerPage', { lat: e.currentTarget.dataset.lat,lng:e.currentTarget.dataset.lng, address:e.currentTarget.dataset.address })
				}
			})
			// #endif
		},
		selectCoupon(e){
			if(this.conid == e.currentTarget.dataset.id){
				this.conid = '';
				this.coupon = 0;
				return
			}
			this.conid = e.currentTarget.dataset.id;
			this.coupon = e.currentTarget.dataset.coupon;
		},
		arrayValueFun(type,fid=false){ //p 省   c市   d区
			let that = this;
			if(!fid)fid=this.fid;
			this.Net._get('area',{fid:fid},(res)=>{
				if(res.code ==1){
				 // console.log(res.data)
				  that[type+'_array'] = res.data;
				}
			});	
		},
		provinceChange(e){
			let _i = e.detail.value;
			this.p_index = _i;
			this.p_id = this.p_array[_i].region_code;
			this.fid = this.p_array[_i].id;
			this.n_province = this.p_array[_i].region_name;
			//清空一下市  区
			this.n_city='';
			this.c_array=[];
			this.c_index='';
			this.c_id='';
			
			this.n_district='';
			this.d_array=[];
			this.d_index='';
			this.d_id='';
			//取市级的数据
			this.arrayValueFun('c')
		},
		cityChange(e){
			
			let _i = e.detail.value;
			this.c_index = _i;
			this.c_id = this.c_array[_i].region_code;
			this.fid = this.c_array[_i].id;
			this.n_city = this.c_array[_i].region_name;
			
			////清空  区
			this.n_district='';
			this.d_array=[];
			this.d_index='';
			this.d_id='';
			
			//取区级的数据
			this.arrayValueFun('d')
		},
		districtChange(e){
			
			let _i = e.detail.value;
			this.d_index = _i;
			this.d_id = this.d_array[_i].region_code;
			this.fid = this.d_array[_i].id;
			this.n_district = this.d_array[_i].region_name;
		},
		
		openAddres() {
			this.cityPickerValueDefault = [0, 0, 1]
			this.$refs.simpleAddress.open();
		},
		
		onConfirm(e) {
			this.pickerText = e.labelArr[2];
			this.city=this.pickerText
			
		},
		go() {
			var that = this;
				  if(that.currentTab==0)
				  {
					if(!that.name || !that.phone || !that.address)
					{
						this.Msg.Fail('请填写收货地址');
						return
					}
				}
			
			that.Net._get('addOrderd1',{p_id:that.p_id,d_id:that.d_id,type:that.type,c_id:that.c_id,sz:that.currentTab,bz:that.bz,name:that.name,phone:that.phone,address:that.address,conid:that.conid,address_id:that.address_id,ck:that.ck},(res)=>{
				//console.log(res.data.success)
				uni.setStorageSync('cs','')
				if(res.code==1){
					uni.setStorageSync('a','')
					uni.redirectTo({
						url: '/pages/car/payment?id='+res.data[0]+'&pay='+res.data[1],
					});
				
				}
				else
				{
					that.Msg.Fail(res.data.msg,(res)=>{
					// uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
					})	
				}
			});   
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.select = index;
		},
		openPhone() {
			uni.showModal({
				title: '客服热线',
				content: '15880123228',
				success: function(res) {
					if (res.confirm) {
						//console.log('用户点击确定');
						uni.makePhoneCall({
							phoneNumber: '15880123228' //仅为示例
						});
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		},
		swichNav(id) {
			this.currentTab = id;
		},
		setRadio(){
			this.checked = !this.checked;
		},
		// autoTick(){
		// 	this.tick = !this.tick;
		// }
	},
	computed:{
		lastPrice(){
			let res = this.e.dis - this.coupon;
			return res.toFixed(2)
		}
	}
};
</script>
<style lang="scss">
	page{
			padding-bottom: 70px;
			background-color: #f8f8f8;
		}
	.nav{ width: 100%; margin: auto; display: flex;height: 10vw; line-height: 10vw; }
	.tab01{ width: 50%; font-size: 4vw; color: #999999; text-align: center;}
	.selected01{
		font-size: 4vw !important;
		color: #ffffff !important;
		background-color: #4d726f !important;
		font-weight: bold !important;
		width: 50%;
		border-radius: 2vw 2vw 0vw 0vw;
	}
	.dizhi{
		font-size: 3.5vw;
		padding: 0vw 5vw;
		line-height: 6vw;
	}
	.content {
		width: 94%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
		margin-top: 3%;
		padding-bottom: 10px;
	}
	
	.content .order_box {
		width: 100%;
		height: 40px;
		position: relative;
	}
	
	.content .order_box .number {
		font-size: 12px;
		color: #333;
		line-height: 40px;
		position: absolute;
		left: 10px;
	}
	
	.content .order_box .state {
		font-size: 12px;
		color: #176bff;
		line-height: 40px;
		position: absolute;
		right: 10px;
	}
	
	.content .goods_box {
		width: 100%;
		height: 90px;
		position: relative;
		margin-bottom: 10px;
	}
	
	.content .goods_box:last-child{
		margin-bottom: 0;
	}
	
	.content .goods_box .goods_img {
		width: 90px;
		height: 90px;
		border-radius: 6px;
		position: absolute;
		left: 10px;
	}
	
	.content .goods_box .title {
		font-size: 14px;
		color: #333;
		width: calc(100% - 160px);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		position: absolute;
		left: 110px;
	}
	
	.content .goods_box .num {
		font-size: 12px;
		color: #666;
		width: 50px;
		text-align: right;
		position: absolute;
		right: 10px;
	}
	
	.content .goods_box .money {
		font-size: 14px;
		color: #ff3543;
		position: absolute;
		left: 110px;
		top: 46px;
	}
	
	.content .goods_box .time {
		font-size: 12px;
		color: #959595;
		position: absolute;
		left: 110px;
		bottom: 0px;
	}
	
	.give_box {
		width: 94%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
		margin-top: 3%;
		text-align: center;
	}
	
	.give_box .x_title {
		width: 100%;
		height: 40px;
		font-size: 14px;
		color: #333;
		line-height: 40px;
		text-indent: 10px;
		text-align: left;
	}
	
	.give_box .text_list {
		width: 100%;
		height: 40px;
		display: flex;
		position: relative;
	}
	
	.give_box .text_list .tick{	
		position: absolute;
		right: 10px;
		top: 12px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #999;
		font-size: 14px;
		line-height: 19px;
		text-align: center;	
		color: transparent;
		box-sizing: border-box;
		color: #fff;
	}
	
	.give_box .text_list .money{	
		position: absolute;
		right: 38px;
		font-size: 12px;
		line-height: 40px;	
		color: #FD4916;
	}
	
	
	
	
	.give_box .text_list .text {
		width: 40%;
		line-height: 40px;
		height: 40px;
		text-indent: 10px;
		font-size: 12px;
		color: #333;
		text-align: left;
	}
	
	.give_box .text_list .tips {
		font-size: 10px;
		color: #999;
		position: absolute;
		left: 10px;
		bottom: 5px;
	}
	
	.give_box .text_list .arrow{
		font-size: 16px;
		color: #999;
		position: absolute;
		right: 10px;
	}
	
	.give_box .text_list .text02 {
		width: calc(100% - 40% - 10px);
		line-height: 40px;
		height: 40px;
		text-indent: 10px;
		font-size: 12px;
		color: #333;
		text-align: right;
	}
	
	.give_box .text_list .text03 {
		width: 50%;
		line-height: 40px;
		height: 40px;
		font-size: 12px;
		color: #333;
		text-align: right;
		position: absolute;
		right: 30px;
	}
	
	.give_box .contact {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
	}
	
	.give_box .contact .icon {
		font-size: 18px;
		color: #333;
		margin-right: 5px;
		line-height: 50px;
		font-weight: bold;
	}
	
	.give_box .contact .text {
		font-size: 14px;
		color: #333;
		line-height: 50px;
	}
	
	
	
	.give_box image {
		width: 70%;
	}
	
	.moneycolor {
		color: #ff3644 !important;
	}
	
	.footer {
		width: 100%;
		height: 60px;
		background: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		border-top: 1px solid #f5f5f5;
		align-items: auto;
		z-index: 9;
	}
	
	.footer .menu {
		width: 30vw;
		height: 45px;
		line-height: 45px;
		text-align: center;
		border-radius: 24vw;
		background-color: #f70000;
		font-size: 14px;
		color: #fff;
		margin-top: 5px;
		margin-right: 4%;
		
	}
	
	.footer .money_box {
		flex: 1;
		height: 60px;
		position: relative;
		display: flex;
		justify-content: flex-end;
	}
	
	.footer .money_box .tick_box {
		width: 100px;
		height: 60px;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
	}
	
	.footer .money_box .tick_box .tick {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #999;
		font-size: 14px;
		line-height: 18px;
		text-align: center;
		/* position: absolute;
		  left: calc(50% - 9px);
		  top: calc(50% - 9px); */
		color: #fff;
		box-sizing: border-box;
		margin-top: 21px;
		margin-right: 10px;
	}
	
	.footer .money_box .tick_box .text {
		font-size: 14px;
		line-height: 60px;
		text-align: center;
		color: #666;
	}
	
	.footer .money_box .total_box {
		width: calc(100% - 50px);
		height: 60px;
		position: absolute;
		right: 10px;
		top: 0;
		display: flex;
		justify-content: flex-end;
	}
	
	.footer .money_box .total_box .text {
		width: 50px;
		font-size: 14px;
		line-height: 60px;
		text-align: right;
		color: #666;
	}
	
	.footer .money_box .total_box .money {
		width: calc(100% - 50px);
		font-size: 14px;
		line-height: 60px;
		text-align: center;
		color: #FE4816;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}
	
	.tickcolor { 
		  background-color: black !important;
		  border: none !important;
		  
		 
		}
	.wrap{
		width: 94%;
		margin: 3vw auto 0vw;
		margin-left: 3%;
		border-radius: 6px;
		background-color: #fff;
		display: inline-block;
	}	
		
		.address_box {
			padding: 5px 0 12px 0;
			display: flex;
			align-items: center;
			margin-top: 10px;
			border-radius: 2vw;
		}
		
		.address_box .icon {
			width: 50px;
			height: 50px;
			text-align: center;
			font-size: 22px;
			color: black;
			line-height: 50px;
		}
		
		.address_box .personal {
			width: calc(100% - 60px);
			position: relative;
		}
		
		.address_box .personal .name_box {
			display: flex;
			margin-top: 5px;
		}
		
		.address_box .personal .name_box .name {
			font-size: 14px;
			color: #333;
			margin-right: 5px;
			line-height: 20px;
		}
		
		.address_box .personal .name_box .phone {
			font-size: 12px;
			color: #666;
			line-height: 20px;
		}
		
		.address_box .personal .address {
			font-size: 12px;
			color: #333;
			width: 100%;
			margin-top: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.address_box .personal .arrow {
			font-size: 35rpx;
			color: #999;
			position: absolute;
			right: 5rpx;
			bottom: 5vw;
		}
	.remarks{
		width: 94%;
		margin: 3vw auto 0vw;
		border-radius: 6px;
		background-color: #fff;
		padding-bottom: 3vw;
	}
	.remarks .bei{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		padding: 3vw;
	}
	.remarks textarea{
		width: 93%;
		margin: auto;
		border: 1px solid #edeaea;
		height: 150rpx;
		line-height: 10vw;
		border-radius: 1vw;
		padding:0vw 2vw ;
		font-size: 3.5vw;
	}
	
	.remarks .zhu02{
		width: 93%;
		margin: auto;
		border: 1px solid #edeaea;
		height: 10vw;
		line-height: 10vw;
		border-radius: 1vw;
		padding:0vw 2vw ;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
	}
	
	.remarks .zhu02 input{
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}
	
	.remarks .zhu02  .arrow{
		font-size: 4vw;
		color: #666;
		width: 10vw;
		text-align: right;
	}
	
	.coupon{
		width: 100%;
		padding: 30rpx 3%;
		z-index: 2;
		position: relative;
		.c_tit{
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			padding-bottom: 20rpx;
		}
		.c_con{
			width: 100%;
			padding: 30rpx 40rpx;
			border-radius: 20rpx;
			background: #ffffff;
			max-height: 50vh;
			.c_list:not(:first-of-type){
				margin-top: 30rpx;
			}
			.c_list{
				width: 100%;
				position: relative;
				height: 170rpx;
				position: relative;
				z-index: 1;
				.l_img{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
				.select{
					position: absolute;
					z-index: 4;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background: rgba(255, 255, 255, 0.5);
					.s_icon{
						font-size: 100rpx;
						color: #ff0800;
						position: absolute;
						right: 50rpx;
						top: 20%;
					}
				}
				.l_con{
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 3;
					color: #ffffff;
					display: flex;
					align-items: center;
					.l_c_t1{
						width: 36%;
						font-size: 50rpx;
						letter-spacing: 6rpx;
						font-weight: bold;
						text-align: center;
					}
					.l_c_t2{
						flex: 1;
						text-align: right;
						padding-right: 40rpx;
						font-size: 32rpx;
					}
					.l_c_time{
						position: absolute;
						bottom: 10rpx;
						right: 40rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>

